<template>
<div>
  <div v-if="!MoreDetail">
    <el-divider content-position="left"><span class="divider">推荐歌单</span></el-divider>
    <span class="tophoto" @click="$global.goPage({name:'MoreMusicList', params:{title:'歌单'}})">
      更多<i class="el-icon-arrow-right"></i></span>
  </div>
 <div  class="music-list">
    <div class="music-list-cover" v-for="(item,i) in MusicList"
         @click="$global.goPage('/MusicListDetail/'+item.id)">
      <div class="cover">
        <span class="white-span"><i class="el-icon-video-play"></i>&nbsp;{{item.playCount|playCount}}</span>
        <span class="white-span"><i class="el-icon-document"></i>&nbsp;{{item.trackCount}}</span>
      </div>
      <img :src="item.picUrl?item.picUrl:item.coverImgUrl" class="music-list-img">
      <span class="music-list-span">{{ item.name }}</span>
    </div>
  </div>
</div>
</template>

<script>
export default {
name: "MusicList",
  props:{
  MoreDetail:{type:Boolean,required: true},
  MusicList: {type:Array,required:true}
  }
}
</script>

<style lang="less">
.el-divider{
  .divider{
    font-size: 20px;
  }

}
.tophoto{
  color: gray;
  float: right;
  margin-right: 10px;
}
.music-list{
 display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-top: 20px;
  padding-bottom: 100px;
  .music-list-cover{
    width: 200px;
    height: 200px;
    border-radius: 10px;
    margin: 0 20px 100px;
    position: relative;
    .cover{
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 30px;
      background: #3e3c3c;
      opacity: 0.5;
      position: absolute;
      bottom: 0;
      .white-span{
        opacity: 1;
        margin:0 10px;
        font-size: 18px;
        line-height: 30px;
        color: #ffffff;
      }
    }
    .music-list-img{
      width: 200px;
      height: 200px;
      border-radius: 10px;
    }
    .music-list-span{
      font-size: 20px;
      font-weight: normal;
      line-height: 24px;
    }
  }
}
.music-list:after{
  content: '';
  width: 50%;
}
</style>
